import React, { Component } from 'react';
import {StyleSheet,Text,View,ScrollView,Dimensions} from 'react-native';
import { Table} from 'iftide';
const LoadStates= {
    Finish: 1,
    Loading: 2,
    NoMoreData: 3,
    LoadFailure: 4
  };
const RefreshStates = {
    Normal: 0,
    Refreshing: 1,
    RefreshSucess: 2,
    RefreshFailure: 3,
    NoRefreshing: 4,
    NoInternet: 5
}
const screenWidth = Dimensions.get('window').width;


export default class Basic extends Component{
    constructor(props) {
        super(props);
        this.state = {
            data : this._getData(),
            loadState: LoadStates.Finish,
            refreshState: RefreshStates.Normal,
        };
    }
    _getData = () => {
        let data = [
            {name:'人民币账户黄金',icon:require('./Icon.png'),iconDesc:'USD', iconDescStyle:{fontSize:10,color:'red'},value:[278.98,278.68],color:'#000'},
            {name:'人民币账户白银',value:[[123.98,'这是一个比较长的文本描述'],123.98],color:'#5bc994',colStyle:{color:'green'},colDescStyle:{color:'pink'}},
            {name:'人民币账户铂金',value:[278.98,278.68],color:'#FF6565',colStyle:{color:'green'}},
            {name:'人民币账户钯金',value:[278.98,278.68],color:'#5bc994',nameStyle:{color:'green'}},
            {name:'美元账户黄金',value:[278.98,278.68]},
            {name:'美元账户白银',value:[3278.98,278.68]},
            {name:'美元账户铂金',value:[278.98,278.68]},
            {name:'美元账户钯金',value:[278.98,2738.68]},
            {name:'欧元账户黄金',value:[278.98,2738.68]},
            {name:'欧元账户白银',value:[278.98,278.68]},
            {name:'欧元账户铂金',value:[278.98,2748.68]},
            {name:'欧元账户钯金',value:[278.98,2758.68]},
            {name:'欧元账户黄金1',value:[278.98,2678.68]},
            {name:'欧元账户白银1',value:[278.98,278.68]},
            {name:'欧元账户铂金1',value:[2378.98,278.68]},
            {name:'欧元账户钯金1',value:[278.98,278.68]},
        ];
        return data;
    }

    componentWillUnmount(){
        clearTimeout(this.timer1);
        clearTimeout(this.timer2);
    }

    _onLoadMore = () => {
        //执行前将load状态置为加载中
        this.setState({loadState:LoadStates.Loading});
        
        let dataExtra = [
            {name:'加载的新数据1',value:[278.98,2678.68]},
            {name:'加载的新数据2',value:[278.98,278.68]},
            {name:'加载的新数据3',value:[2378.98,278.68]},
            {name:'加载的新数据4',value:[278.98,278.68]}];
       
        let data = this.state.data.concat(dataExtra);        
        
        this.timer1 = setTimeout(()=>{  
            //模拟正常加载数据,加载完成后将LoadStates置为Finish
            this.setState({loadState:LoadStates.Finish,data:data});
            //模拟加载后无更多数据
            //this.setState({loadState:LoadStates.NoMoreData});
            //模拟加载数据失败
            //this.setState({loadState:LoadStates.LoadFailure});
            
        },3000);
    }

    _onRefresh = () => {
        //执行下拉刷新前将refeshing置为true
        this.setState({refreshState:RefreshStates.Refreshing})
        this.timer2=setTimeout(()=>{
            let tmpData = [
                {name:'刷新后新数据1',value:[278.98,2678.68]},
                {name:'刷新后新数据2',value:[278.98,278.68]}]
           
            let data = tmpData.concat(this.state.data);
            //模拟数据加载成功
            this.setState({data:data,refreshState:RefreshStates.RefreshSucess});
            //模拟数据加载失败
            //this.setState({refreshState:RefreshStates.RefreshFailure});
            //模拟数据加载失败
            //this.setState({refreshState:RefreshStates.NoRefreshing});
        },3000);
        
    }

    render(){
        
        let footer = (
            <View style={{paddingLeft:20,backgroundColor:'grey',height:40,justifyContent:'center'}}>
                <Text>总计：2321</Text>
            </View>
        );
        
        let headData = [{name:'品种',width:screenWidth/3},{name:'买入价',width:screenWidth/3},{name:'卖出价',width:screenWidth/3}];
        let headStyles = {backgroundColor:'grey',color:'black',height:40,fontSize:14}

        return(
            <View style={{flex:1}}>
                <Text>表格</Text>
                <Table
                    headData={headData}
                    // headStyles={headStyles}
                    data={this.state.data}
                    tabHeight={500}
                    footer={footer}
                    alignment='center'
                    firstColAlign='center'
                    showLine={false}
                    zebraLine={true}
                    headFixed={true}
                    footerFixed={true}
                    border={false}
                    onLoadMore={this._onLoadMore}
                    onRefresh={this._onRefresh}
                    loadState={this.state.loadState}
                    refreshState={this.state.refreshState}
                />               
            </View>
        );
    }
}